<template>
  <div class="px-[30px] py-5 user-info min-h-full flex flex-col">
    <div class="border-b border-br pb-5">
      <span class="text-2xl font-medium">我的报名</span>
    </div>
    <div v-if="data.lists.length">
      <div
          class="cursor-pointer"
          v-for="item in data.lists"
          :key="item.id"
      >
        <div class="border-b border-br py-4 flex items-center">
          <ElImage
              v-if="item.cover"
              class="flex-none w-[180px] h-[135px] mr-4"
              :src="item.cover"
              fit="cover"
              @click="$router.push(`/competition/detail/${item.competitionId}`)"
          />
          <div class="flex-1">
            <div class="text-lg font-medium line-clamp-1" @click="$router.push(`/competition/detail/${item.competitionId}`)">
              {{ item.name }}  &nbsp;
              <span>
                  <el-tag type="primary" v-if="item.applyType==1">男单打</el-tag>
                  <el-tag type="success" v-if="item.applyType==2">男双打</el-tag>
                  <el-tag type="primary" v-if="item.applyType==3">女单打</el-tag>
                  <el-tag type="success" v-if="item.applyType==4">女双打</el-tag>
                  <el-tag type="danger" v-if="item.applyType==5">男女混打</el-tag>
                </span>&nbsp;
            </div>

            <div class="text-tx-regular line-clamp-2 mt-4" @click="$router.push(`/competition/detail/${item.competitionId}`)">
              {{ item.description }}
            </div>
            <div
                class="mt-5 text-tx-secondary flex justify-between"
            >
              <div>
                报名于：{{ item.createTime }} &nbsp;&nbsp;
                <span>
                报名时间：{{ item.registrationTime }} ~ {{item.registrationEndTime}}
                </span>
                &nbsp;
              </div>
              <div>
                <span @click="$router.push(`/competition/invite/${item.teamNo}`)">
                  <el-tag type="primary" v-if="item.status==1">报名成功</el-tag>
                  <el-tag type="warning" v-if="item.status==0">组队中</el-tag>
                  <el-tag type="warning" v-if="item.status==2">已取消</el-tag>
                </span>&nbsp;
                <el-link :underline="false" type="primary" v-if="item.status == 0" @click="inviteUrl(item.teamNo)">邀请队友</el-link>&nbsp;&nbsp;&nbsp;
                <el-link :underline="false" type="primary" @click.stop="handelApplyCancel(item.id)" v-if="item.status==0">取消报名</el-link>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="py-4 flex justify-end">
        <el-pagination
            v-model:current-page="params.page_no"
            :total="data.count"
            :page-size="params.page_size"
            hide-on-single-page
            layout="total, prev, pager, next, jumper"
            @current-change="refresh()"
        />
      </div>
    </div>

    <div class="flex flex-1 justify-center items-center" v-else>
      <el-empty
          :image="empty_news"
          description="暂无收藏"
          :image-size="250"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { cancelCollect } from '~~/api/news'
import empty_news from '@/assets/images/empty_news.png'
import { ElImage, ElButton, ElPagination, ElEmpty } from 'element-plus'
import feedback from '~~/utils/feedback'
import {cancelCompetitionApply, getCompetitionApplyLists} from "~/api/competition";
const params = reactive({
  page_no: 1,
  page_size: 15
})
const { data, refresh } = await useAsyncData(() => getCompetitionApplyLists(params), {
  initialCache: false
})
const handelApplyCancel = async (id) => {
  await cancelCompetitionApply({ id })
  feedback.msgSuccess('已取消报名')
  refresh()
}
const inviteUrl = async (teamNO) =>{
  let url = window.location.protocol+"//"+window.location.hostname
  const port = window.location.port
  if(port){
    url += ":"+port;
  }
  let urlStr = url+"/apply/invite/"+teamNO;
  if (navigator.clipboard) {
    try {
      await navigator.clipboard.writeText(urlStr);
      feedback.msgSuccess('邀请连接复制成功！')
    } catch (error) {
      feedback.msgError('邀请连接复制失败！')
    }
  } else {
    // 传统方法
    const textArea = document.createElement('textarea');
    textArea.value = urlStr;
    document.body.appendChild(textArea);
    textArea.select();
    try {
      const successful = document.execCommand('copy');
      if (successful) {
        feedback.msgSuccess('邀请连接复制成功！')
      } else {
        feedback.msgError('邀请连接复制失败！')
      }
    } catch (err) {
      feedback.msgError('邀请连接复制失败！')
    }
    document.body.removeChild(textArea);
  }
}
definePageMeta({
  module: 'personal',
  auth: true
})
</script>
<style lang="scss" scoped></style>
